body.dark {
  @import '~@sweetalert2/themes/wordpress-admin/wordpress-admin.scss';

  .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
    background: none !important;
  }

  color: #777;

  .main, .el-dialog, {
    background-color: $--main-dark-background-color;

    color: #FFFFFF;

    fill: #FFFFFF;

    .el-card {
      background-color: $--panel-dark-color;
      border: none;
    }
  }

  .fullscreen-wrapper {
    background-color: $--panel-dark-color;
  }

  .field-card, .panel.mini {
    background-color: #3C405ADF;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
  }

  .field-card {
    border: none;
  }

  .panel {
    background-color: $--panel-dark-color;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border: none;

    .panel-heading {
      background-color: transparent;
      color: #FFFFFF;
      border-bottom: 1px solid #E8E8E8;
    }

    .panel-body {
      background-color: transparent;
    }
  }

  .el-table {
    color: #DCDCDC !important;
    background-color: transparent;

    th, tr {
      background-color: transparent;
    }

    td, th {
      border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    }

    thead {
      color: #DCDCDCD6 !important;
    }

    tr.el-table__row--striped td {
      background-color: transparent;
    }

    .el-table__body tr.hover-row > td {
      background-color: rgba(255, 255, 255, 0.08);
    }

  }

  .el-table--border th, .el-table--border td {
    border-color: rgb(61, 61, 61);
  }

  .el-input__inner, .el-textarea__inner {
    background: transparent !important;
    border: solid 1px #8e8e8e;
    color: rgba(219, 219, 219, 1);
  }

  .el-input__inner:focus, .el-input__inner:hover, .el-textarea__inner:focus, .el-textarea__inner:hover {
    border-color: $--color-primary;
  }

  .el-form-item__label {
    color: #c9ced6;
  }

  .el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li {
    background-color: rgb(59, 59, 59);
  }

  .el-input-number__increase, .el-input-number__decrease {
    background: $--dark-border-bottom-color;
  }

  .el-dropdown__popper {
    border: none;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.3);
  }

  .el-dropdown-menu__item {
    color: #EAEAEA;
  }

  .el-dropdown-menu, el-popper, .el-collapse-item__header, .el-collapse-item__wrap {
    background-color: #2f354ade;
  }

  .el-loading-mask {
    background-color: rgb(93, 93, 93, 0.8);
  }

  .el-collapse-item__header {
    color: rgba(235, 235, 245, .75);
    border-bottom: 1px solid $--dark-border-bottom-color;
  }

  .el-collapse {
    border-top: 1px solid $--dark-border-bottom-color;
    border-bottom: 1px solid $--dark-border-bottom-color;
  }

  .el-collapse-item__wrap {
    border-bottom: 1px solid $--dark-border-bottom-color;
  }

  .el-collapse-item__content {
    color: #ffffff;
  }

  .el-popper.is-light {
    border: none;
  }

  .el-menu-item i {
    color: #ffffff;
  }

}

body.light {
  .main, {
    background-color: #F4F6FA;
  }

  .panel, .dropdown-menu, .fullscreen-wrapper {
    background-color: #FFFFFF;
  }

  .panel {
    border-color: #ddd;

    .panel-heading {
      color: #333;
      background-color: #ffffff;
      border-color: #ddd;
    }
  }
}


